/* eslint-disable react/require-default-props */
import React from 'react'
import classNames from 'classnames'
import {
  type NativeProps,
  withNativeProps,
} from '../../utils/native-props'

const classPrefix = 'rt-badge'

export const dot = <></>

export type BadgeProps = {
  /** 描边 */
  bordered?: boolean;
  /** 徽标背景色，等效于设置 --color CSS 变量 */
  color?: string;
  /** 徽标内容：如果传 null undefined '' 或不传，则不显示徽标；如果传 Badge.dot，会显示小红点 */
  content?: React.ReactNode | typeof dot;
  /** children */
  children?: React.ReactNode;
  /** Badge wrap 自定义类名 */
  wrapperClassName?: string;
  /** Badge wrap 自定义样式 */
  wrapperStyle?: React.CSSProperties;
} & NativeProps<'--top' | '--right' | '--color'>

export const Badge: React.FC<BadgeProps> = (props) => {
  const {
    bordered,
    color,
    content,
    children,
    wrapperClassName,
    wrapperStyle,
  } = props

  const isDot = content === dot

  const badgeClass = classNames(classPrefix, {
    [`${classPrefix}-abs`]: !!children,
    [`${classPrefix}-dot`]: isDot,
    [`${classPrefix}-bordered`]: bordered,
  })

  const element = content || content === 0 ? (
    withNativeProps(
      props,
      <div
        className={badgeClass}
        style={
          {
            '--color': color,
          } as BadgeProps['style']
        }
      >
        {!isDot && (
          <div className={`${classPrefix}-content`}>{content}</div>
        )}
      </div>,
    )
  ) : null

  return children ? (
    <div
      className={classNames(`${classPrefix}-wrapper`, wrapperClassName)}
      style={wrapperStyle}
    >
      {children}
      {element}
    </div>
  ) : (
    element
  )
}
